<template>
  <div class="service-item-title">
    服务项目
  </div>
  <!-- 表格 -->
  <OtherTable :data="serciveItem" :columns="columns"></OtherTable>
  <!-- 服务详情字段的卡片 -->
  <el-card class="detail-item">
    <div class="detail-title">服务详情字段</div>
    <el-form :model="formItem" label-width="auto">
      <el-form-item label="舒张压" style="margin: 20px 0;">
        <el-input v-model="formItem.user" placeholder="请输入" clearable style="width: 200px;height: 40px;" />
        <div style="margin-bottom: 10px; margin-left: 8px ; color: #ccc;">mmHg</div>
      </el-form-item>
      <el-form-item label="收缩压" style="margin-bottom: 20px;">
        <el-input v-model="formItem.user" placeholder="请输入" clearable style="width: 200px;height: 40px;" />
        <div style="margin-bottom: 10px; margin-left: 8px ; color: #ccc;">mmHg</div>
      </el-form-item>
      <el-form-item label="症状" style="margin-bottom: 20px;">
        <el-input v-model="formItem.user" placeholder="请输入" clearable style="height: 40px;" />
      </el-form-item>
      <el-form-item label="健康指导" style="margin-bottom: 20px;">
        <el-input v-model="formItem.user" placeholder="请输入" clearable style="height: 40px;" />
      </el-form-item>
      <el-form-item label="备注" style="margin-bottom: 20px;">
        <el-input v-model="formItem.user" placeholder="请输入" clearable style="height: 40px;" />
      </el-form-item>
    </el-form>
  </el-card>
  <div class="edit-log">编辑记录</div>
  <div class="edit-item">
    <!-- 左边的进度条 -->
    <div class="left-edit">
      <img src="../../assets/u5659.png" alt="">
      <img src="../../assets/u7065.png" alt="" class="left-item">
      <img src="../../assets/u5659.png" alt="">
    </div>
    <!-- 右边的文字 -->
    <div class="right-edit">
      <div class="edit-pac">编辑服务包</div>
      <div class="edit-per">
        <span>审核人：王敏 </span>
        <span>提交时间：2021年9月15日</span>
      </div>
      <div class="add-pac">新增服务包</div>
      <div class="action-per">
        <span>操作人：王敏 </span>
        <span>操作时间：2021年9月15日</span>
      </div>
    </div>
  </div>
  <img src="../../assets/u402.png" alt="" style="margin-top: 50px;margin-bottom: 10px;">
</template>

<script setup>
import { ref } from 'vue';
import OtherTable from '../../components/base-table/OtherTable.vue';
defineProps(['columns', 'serciveItem', 'packageId', 'servicePackageData'])
const emit = defineEmits(['getData'])
const formItem = ref({
  user: ''
})

const columns = [
  {
    label: '项目编号',
    prop: '_id',
  },
  {
    label: '项目名称',
    prop: 'name',
  },
  {
    label: '次数',
    prop: 'count',
  },
  {
    label: '项目类型',
    prop: 'type'
  },
  {
    label: '项目介绍',
    prop: 'intro'
  },
]
</script>

<style scoped lang="scss">
/* 修改 placeholder 颜色 */
::v-deep .el-input__inner::placeholder {
  color: #ccc;
  /* 浅灰色，可按需调整 */
}

.service-item-title {
  color: #333333;
  font-size: 16px;
  margin: 30px 0;
}

.detail-item {
  width: 699px;
  height: 395px;
  margin: 0 auto;
  margin-top: 30px;

}

.detail-title {
  width: 100%;
  height: 40px;
  font-size: 16px;
  color: #333333;
  border-bottom: 1px solid #e5e5e5;
  padding: 0;
}

.edit-log {
  color: #333333;
  font-size: 16px;
  margin-top: 30px;
}

.edit-item {
  display: flex;
}

.left-edit {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
  margin-top: 30px;

  .left-item {
    width: 2px;
    height: 113px;
    margin-left: 5px;
  }

  img {
    width: 14px;
    height: 14px;
  }
}

.right-edit {
  margin-top: 30px;
  margin-left: 20px;
}

.edit-pac {
  font-size: 14px;
  color: #666666;
  margin-bottom: 10px;
}

.edit-per,
.action-per {
  font-size: 13px;
  color: #cccccc;
}

.add-pac {
  font-size: 14px;
  color: #666666;
  margin-top: 68px;
  margin-bottom: 10px;
}
</style>
<style>
.el-textarea__inner {
  resize: none !important;
  height: 120px;
}
</style>